<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js-query</title>
</head>
<body>
<!--用户名：数字和英文组成  长度在8-18位   密码：数字和英文组成 长度在6-16位  重新输入密码要与之前输入的密码一致  手机号：以1开头11位数字-->
<!--注册按钮 点击 提示注册成功-->

<form>
    <label>用户名：</label><input id="username" type="text"  placeholder="请输入用户名">
    <span id="uname"></span>
    <br>
    <label>手机号：</label><input id="tel" type="text"  placeholder="请输入手机号">
    <span id="utel"></span>
    <br>
    <label>密码：</label><input id="password" type="text" placeholder="请输入密码">
    <span id="upwd"></span>
    <br>
    <label>确认密码：</label><input id="password1" type="text" placeholder="请输入密码">
    <span id="upwd1"></span>
    <br>
    <button onclick="func01()">注册</button>
</form>

<script>
    document.getElementById("username").onblur=function () {
        var msg=document.getElementById("uname");
        var par=/^[\w]{8,18}$/;      //正则表达式
        ret=par.test(this.value);     //值为true、false，为真表示匹配正确，为false表示不匹配
        if(this.value.length>18 || this.value.length<8 || !ret) {
            msg.innerHTML = "用户名不合法";
            msg.style.color="red";
        }
        else
            msg.innerHTML = "";
    };
    
    document.getElementById("tel").onblur=function () {
        var msg=document.getElementById("utel");
        var par=/^1[\d]{10}$/;      //正则表达式
        ret=par.test(this.value);     //值为true、false，为真表示匹配正确，为false表示不匹配
        if(!ret) {
            msg.innerHTML = "手机号不合法";
            msg.style.color="red";
        }
        else
            msg.innerHTML = "";
    };
    
    document.getElementById("password").onblur=function () {
        var msg=document.getElementById("upwd");
        var par=/^[0-9a-zA-Z]{6,16}$/;      //正则表达式
        ret=par.test(this.value);     //值为true、false，为真表示匹配正确，为false表示不匹配
        if(this.value.length>16 || this.value.length<6 || !ret) {
            msg.innerHTML = "密码不合法";
            msg.style.color="red";
        }
        else
            msg.innerHTML = "";
    };
    
    document.getElementById("password1").onblur=function () {
        var msg=document.getElementById("upwd1");
        var par=/^[\w]{6,16}$/;      //正则表达式
        ret=par.test(this.value);     //值为true、false，为真表示匹配正确，为false表示不匹配
        if(this.value.length>16 || this.value.length<6 || !ret) {
            msg.innerHTML = "密码不合法";
            msg.style.color="red";
        }
        else
            msg.innerHTML = "";
    };

    function func01() {
        var pwd1=document.getElementById("password").value;
        var pwd2=document.getElementById("password1").value;
        if (pwd1===pwd2)
            alert("注册成功");
        else
            alert("前后密码不一致");
    }

</script>
</body>
</html>